<template>
  <view class="bottle-subscribe-modal" v-if="show">
    <view class="modal-mask"></view>
    <view class="modal-container">
      <!-- 顶部装饰 -->
      <view class="modal-decoration top-left"></view>
      <view class="modal-decoration top-right"></view>
      <view class="modal-decoration bottom-left"></view>
      <view class="modal-decoration bottom-right"></view>

      <!-- 标题 -->
      <view class="modal-title">
        <view class="icon-wrapper">
          <text class="tn-icon-notice-fill notification-icon"></text>
        </view>
        <text>接收漂流瓶消息</text>
      </view>

      <!-- 提示内容 -->
      <view class="subscribe-content">
        <view class="content-text">
          <text>开启后，当您的漂流瓶被捞取或收到回复时，我们将第一时间通知您！</text>
        </view>

        <!-- 消息示例 -->
        <view class="message-example">
          <view class="message-card">
            <view class="message-title">漂流瓶被捞取通知</view>
            <view class="message-item">
              <text class="label">瓶子内容:</text>
              <text class="value">{{bottlePreview}}</text>
            </view>
            <view class="message-item">
              <text class="label">捞取时间:</text>
              <text class="value">刚刚</text>
            </view>
            <view class="message-item">
              <text class="label">提醒:</text>
              <text class="value highlight">有人发现了你的漂流瓶!</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部操作区 - 只保留订阅按钮 -->
      <view class="modal-actions">
        <view class="action-btn subscribe" @tap="requestSubscribe">
          <text class="tn-icon-bell action-icon"></text>
          <text>立即开启</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: 'BottleSubscribe',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    bottleContent: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      templateIds: [],
      isRequesting: false
    };
  },
  computed: {
    bottlePreview() {
      if (!this.bottleContent) return '您扔出的漂流瓶...';
      return this.bottleContent.length > 15
        ? this.bottleContent.substring(0, 15) + '...'
        : this.bottleContent;
    }
  },
  methods: {
    /**
     * 取消订阅，关闭弹窗
     */
    cancelSubscribe() {
      // 关闭弹窗
      this.$emit('update:show', false);

      // 触发取消事件
      this.$emit('cancel');
    },

    /**
     * 请求订阅消息授权
     */
    requestSubscribe() {
      this.$emit('success');
    }
  }
};
</script>

<style lang="scss" scoped>
.bottle-subscribe-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;

  // 遮罩层
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6rpx);
  }

  // 弹窗容器
  .modal-container {
    position: relative;
    width: 650rpx;
    background-color: #1a1a1a;
    border-radius: 24rpx;
    box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 1001;
    padding: 40rpx 30rpx;
    animation: modalIn 0.3s ease forwards;

    // 装饰元素
    .modal-decoration {
      position: absolute;
      width: 40rpx;
      height: 40rpx;

      &.top-left {
        top: 0;
        left: 0;
        border-top: 6rpx solid #B3F73C;
        border-left: 6rpx solid #B3F73C;
        border-top-left-radius: 16rpx;
      }

      &.top-right {
        top: 0;
        right: 0;
        border-top: 6rpx solid #B3F73C;
        border-right: 6rpx solid #B3F73C;
        border-top-right-radius: 16rpx;
      }

      &.bottom-left {
        bottom: 0;
        left: 0;
        border-bottom: 6rpx solid #B3F73C;
        border-left: 6rpx solid #B3F73C;
        border-bottom-left-radius: 16rpx;
      }

      &.bottom-right {
        bottom: 0;
        right: 0;
        border-bottom: 6rpx solid #B3F73C;
        border-right: 6rpx solid #B3F73C;
        border-bottom-right-radius: 16rpx;
      }
    }

    // 标题
    .modal-title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30rpx;

      .icon-wrapper {
        width: 64rpx;
        height: 64rpx;
        background: linear-gradient(135deg, #B3F73C, #92D32F);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
      }

      .notification-icon {
        color: #000;
        font-size: 32rpx;
      }

      text {
        color: #fff;
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    // 内容
    .subscribe-content {
      .content-text {
        color: #ccc;
        font-size: 28rpx;
        line-height: 1.6;
        margin-bottom: 30rpx;
      }

      .message-example {
        margin-top: 30rpx;

        .message-card {
          background-color: #2a2a2a;
          border-radius: 16rpx;
          padding: 20rpx;

          .message-title {
            color: #B3F73C;
            font-size: 30rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
            text-align: center;
          }

          .message-item {
            display: flex;
            margin-bottom: 10rpx;
            font-size: 26rpx;

            .label {
              color: #999;
              width: 120rpx;
              flex-shrink: 0;
            }

            .value {
              color: #eee;
              flex: 1;
            }

            .highlight {
              color: #B3F73C;
              font-weight: bold;
            }
          }
        }
      }
    }

    // 底部按钮区域 - 调整为单按钮居中
    .modal-actions {
      display: flex;
      justify-content: center;
      margin-top: 40rpx;

      .action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88rpx;
        border-radius: 44rpx;
        font-size: 30rpx;
        font-weight: bold;
        width: 80%;
      }

      .subscribe {
        background: linear-gradient(135deg, #B3F73C, #92D32F);
        color: #000;
        position: relative;
        overflow: hidden;

        .action-icon {
          margin-right: 10rpx;
        }

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.3) 50%,
            rgba(255,255,255,0) 100%
          );
          animation: shimmer 1.5s infinite;
        }
      }
    }
  }
}

@keyframes modalIn {
  from {
    transform: translateY(20rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}
</style>
